<template>
<!--  组件的结构-->
  <div class="student">
    <h2 >学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>当前求和为：{{number}}</h2>
    <button @click="add">点我number+1</button>
    <button @click="sendStudentName">把学生名传给App</button>
    <button @click="unbind">解绑atguigu事件</button>
    <button @click="death">销毁当前Student组件实例</button>
  </div>
</template>
<script>
export default {
  name:'Student',
  data() {
    return {
      sex:'男',
      name:'张三',
      number:0
    }
  },
  mounted() {
  },
  methods:{
    add(){
      this.number++
    },
    sendStudentName(){
      // 触发Student实例对象上的atguigu方法
      this.$emit('atguigu',this.name,1,2,3)
      this.$emit('demo')
    },
    unbind(){
      // this.$off('atguigu') //解绑一个自定义事件
      // this.$off(['atguigu','demo']) //解绑多个自定义事件
      this.$off()//解绑所有自定义事件
    },
    death(){
      this.$destroy()//销毁当前Student组件实例,销毁后所有Student实例的自定义事件全部失效
    }
  }
}
</script>
<style lang="less">
/*组件的样式*/
.student{
  background-color: #b71e1e;
  padding: 5px;
  margin-top: 30px;
}
</style>